﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>2-10</title>
    <!--   引入jQuery -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <script src="/scripts/assist.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/styles/selectstyle.css" />
    <script type="text/javascript">
        $(document).ready(function () {
            //荧光绿：#bbffaa
            //选取每个class为adc的div父元素下的第2个子元素
            $('#btn1').click(function () {
                $("div.adc :nth-child(2)").css("background", "#bfa");
            })
            //选取每个class为adc的div父元素下的第一个子元素
            $("#btn2").click(function () {
                $("div.adc :first-child").css("background", "#bfa")
            })
            //选取每个class为adc的div父元素下的最后一个子元素
            $('#btn3').click(function () {
                $("div.adc :last-child").css("background", "#bfa");
            })
            //如果class为adc的div父元素下的仅仅只有一个子元素，那么选中这个子元素
            $('#btn4').click(function () {
                $("div.adc :only-child").css("background", "#bfa");
            })
        });
    </script>
</head>
<body>
    <button id="reset">手动重置页面元素</button>
    <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>

    <h3>子元素过滤选择器.</h3>
    <input type="button" value="选取每个class为adc的div父元素下的第2个子元素." id="btn1" />
    <input type="button" value="选取每个class为adc的div父元素下的第一个子元素." id="btn2" />
    <input type="button" value="选取每个class为adc的div父元素下的最后一个子元素." id="btn3" />
    <input type="button" value="如果class为adc的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4" />
    <br /><br />
    <!-- 测试的元素 -->
    <div class="adc" id="ap">
        id为adc，class为adc的div（安妮）
        <div class="sup">class为sup的div（曙光）</div>
    </div>
    <div class="adc" id="tank" title="top">
        id为tank，class为adc的title为top的div（德玛）
        <div class="sup" title="mid">
            class为sup的title为mid的div（宝石）
        </div>
        <div class="sup" title="mid">
            class为sup的title为mid的div（璐璐）
        </div>
    </div>
    <div class="adc">
        class为adc的div（EZ）
        <div class="sup">
            class为sup的div（琴女）
        </div>
        <div class="sup">
            class为sup的div（星妈）
        </div>
        <div class="sup">
            class为sup的div（鲛姬）
        </div>
        <div class="sup">
            class为sup的div（牛头）
        </div>
    </div>

    <div class="adc">
        class为adc的div（奥巴马）
        <div class="sup">class为sup的div（凤女）</div>
        <div class="sup">class为sup的div（机器人）</div>
        <div class="sup">class为sup的div（狗熊）</div>
        <div class="sup" title="tesst">class为sup的title为tesst的div（雪人）</div>
    </div>

    <div style="display:none;" class="none">
        style的display为"none"的div（VN）
    </div>

    <div class="hide">
        class为"hide"的div（螃蟹）
    </div>

    <div>
        包含input的type为"hidden"的div（飞机）
        <input type="hidden" size="8" />
    </div>

    <span id="mover">正在执行动画的span元素.</span>
</body>
</html>
